<template>
    <el-aside :width="main.isCollapse ? '180px' :'63px'">
        <el-menu :collapse-transition="false" :collapse="!main.isCollapse" background-color="#777" text-color="#fff" :default-active="$route.name" class="el-menu-vertical-demo">
            <h3 v-show="main.isCollapse" class="aside-title">VUE后台</h3>
            <h3 v-show="!main.isCollapse" class="aside-title">VUE</h3>
            <el-menu-item @click="clickMenu(item)" v-for="item in onChildren()" :key="item.name" :index="item.name">
                <el-icon>
                   <component class="icons" :is="item.icon"></component>
                </el-icon>
                <span>{{ item.label }}</span>
            </el-menu-item>

            <el-sub-menu v-for="item in hasChildren()" :key="item.label"  index="1">
                <template #title>
                    <el-icon>
                        <component class="icons" :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.label }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item @click="clickMenu(subItem)" v-for="(subItem,subIndex) in item.children" :index="subItem.name" :key="subIndex">
                        <el-icon>
                            <component :is="subItem.icon"></component>
                        </el-icon>
                        <span>{{ subItem.label }}</span>
                    </el-menu-item>
                </el-menu-item-group>

            </el-sub-menu>

        </el-menu>
    </el-aside>

</template>



<script setup>
// 引入仓库
import {useAside} from '../store/index.js'
const main = useAside()


// 引入路由
import {useRouter} from 'vue-router'
const router =useRouter()


const list=[
    {
        path:'/',
        name:'home',
        label:'首页',
        icon:'house',
        url:'Home/Home'
    },
    {
        path:'/user',
        name:'user',
        label:'用户管理',
        icon:'user',
    },
    {
        label:'其他',
        icon:'setting',
        children:[
            {
               path:'/page1',
               name:'page1',
               label:'页面1',
               icon:'starFilled' 
            },
            {
               path:'/page2',
               name:'page2',
               label:'页面2',
               icon:'starFilled' 
            },
        ]
    }
]

const onChildren = ()=>{
    return list.filter((item)=> !item.children)
}
const hasChildren = ()=>{
    return list.filter((item)=> item.children)
}
// 点击菜单栏 
const clickMenu =(item)=>{
    // console.log(item);
    router.push({
        name:item.name
    })
    main.selectMenu(item)
}





</script>


<style lang="less">
.el-aside {
    background-color: #777;
    .aside-title{
        text-align: center;
        font-weight: 700;
        color: #fff;
        line-height: 46px;
    }
}
</style>